<template>
  <div class="course_detail w1200">
    <!--页面标题-->
    <div class="course_title">
      <span style="cursor: pointer" @click="$router.push('/index')">{{subject_name}}</span>> 课程介绍
    </div>
    <!--页面内容-->
    <div class="course_content">
      <!--页面左侧视频及简介-->
      <div class="left_content">
        <video-play
          :subject_id="subject_id"
          :curriculum_id="curriculum_id"
          :video_length="curriculumDetail.video_length"
          :canExerciseLength="canExerciseLength"
          @setCanExercise="handleSetCanExercise"
          ref="videoPlay"/>
        <div class="course_introduce">
          <!--0624 -->
          是否可以做题：{{canExercise}}<br>
          <span class="current_title">
            第{{currentCurriculum.chapterIndex + 1 | num2Cn}}章 {{currentCurriculum.chapter_name}}
          </span>
          <div class="exercise_data">
            <span>第{{currentCurriculum.curriculumIndex + 1 | num2Cn}}节 {{curriculumDetail.curriculum_name}}</span>
            <span>已学{{curriculumDetail.study_length | second2MinuteFloor}}min</span>
            <span class="active_item">成绩{{curriculumDetail.score}}分</span>
            <button :disabled="!canExercise" @click="goPageExercises">做题</button>
          </div>
          <div class="course_datail">
            <div class="tab_header">
              <span @click="tabIndex = 0" :class="{'active_tab': tabIndex === 0}">课程描述</span>
              <span @click="tabIndex = 1" :class="{'active_tab': tabIndex === 1}">资料下载</span>
              <i class="active_arrow" :class="{'second_active': tabIndex === 1}"></i>
            </div>
            <div class="tab_content">
              <div v-if="tabIndex === 0" v-html="curriculumDetail.content"></div>
              <!--资料列表-->
              <div v-if="tabIndex === 1">
                <div v-if="curriculumDetail.enclosure_list&&curriculumDetail.enclosure_list.length !== 0">
                  <div
                    v-for="(enclosure, enclosureIndex) in curriculumDetail.enclosure_list"
                    :key="'enclosure'+enclosureIndex"
                    class="enclosure_file">
                    <p class="file_name ellipsis">{{enclosure.file_name}}</p>
                    <p>{{enclosure.size | byte2MB}}(MB)</p>
                    <div
                      @click="$download(enclosure.path, enclosure.file_name)"
                      class="download_btn">
                      <i class="icon download_icon"></i>
                      下载
                    </div>
                  </div>
                </div>
                <div v-else class="no_download">暂无下载内容</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--页面右侧课程列表-->
      <div class="right_content">
        <p class="list_title">课程表</p>
        <div class="course_panel"
             v-for="(chapter, chapterIndex) in chapterList"
             :key="'chapter'+chapterIndex">
          <p class="course_panel_tit" @click="handleCollapse(chapterIndex)">
            <span>第{{chapterIndex + 1 | num2Cn}}章 {{chapter.chapter_name}}</span>
          </p>
          <div class="course_panel_cont" v-show="chapter.isOpen">
            <div
              @click="handleCourseChange(curriculum)"
              v-for="(curriculum, curriculumIndex) in chapter.curriculum_list"
              :key="'curriculum'+curriculumIndex"
              class="course_panel_item">
              <span class="course_name">{{curriculumIndex + 1}}.{{curriculum.curriculum_name}}</span>
              <p class="learn_data" v-if="curriculum.study_length > 0">
                <span>已学{{curriculum.study_length | second2MinuteFloor}}min</span>
                <span class="grade_row" :class="curriculum.score >= 60 ? 'is_pass': 'no_pass'">{{curriculum.score || 0}}分</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 1.已有学习数据的，一进到课程详情页，按钮可点击。
// 视频下方的做题按钮默认灰色，视频播放总时长80%时可以点击做题按钮点亮
// 点击跳转至随堂练习页面
// 下方有课程描述和资料下载两个标签页
// 右侧课程表章节可以折叠展开
// 右侧课程表章节可以折叠展开，有学习进度数据的需要展示出已学学时和分数，不及格的分数标红
// ①没有学习数据的，初始化展示第一章节里的第一节课程信息②有学习数据，初始化显示他还未开始，接下来要学习的课程。③都学习完了显示最后一节课程。
/** !!!is_study === 1 表示学习中，为0时表示未开始或已学习完毕或其他已开始学习，默认显示学习中的课程详情*/
// 3.做题的分数满分都是100分，60分算及格，每道题分数是根据习题数算出来的，例如有5道题，每道题都是20分。4道题每道题25分这样

import VideoPlay from './comp/VideoPlay'
// eslint-disable-next-line no-unused-vars
import courseDetailListMock from './courseDetailListMock'
// eslint-disable-next-line no-unused-vars
import courseDetailMock from './courseDetailMock'
import {chapterSetProp, getCurrentCurriculum} from './dataHandle'

// eslint-disable-next-line no-unused-vars
const CAN_EXERCICES_RATIO = 0.8 // 做题播放时间系数

export default {
  name: 'CourseDetail',
  components: {
    VideoPlay
  },
  data() {
    return {
      tabIndex: 0, // 视频下方课程详情
      subject_id: null, // 学科id
      subject_name: '', // 学科名称
      currentCurriculum: {}, // 当前节对象
      curriculumDetail: {}, // 课程详情
      chapterList: [], // 章列表
      canExercise: false, // 是否可以做题
    }
  },
  computed: {
    // 课程id
    curriculum_id() {
      return this.currentCurriculum.curriculum_id
    },
    // 已播放的总时长
    study_length() {
      return this.curriculumDetail.study_length
    },
    // 做题的需要播放的时长
    canExerciseLength() {
      // return 2
      return Math.floor(this.curriculumDetail.video_length * CAN_EXERCICES_RATIO)
    }
  },
  mounted() {
    this.subject_id = Number(this.$route.query.subject_id)
    this.subject_name = this.$route.query.subject_name
    this.init()
  },
  methods: {
    async init() {
      // let chapterList = courseDetailListMock
      let chapterList = await this.getChapterList()
      // 将is_study === 1 的父节点isOpen设置为true, 如果没有is_study === 1则将第一个的isOpen设置为true
      this.chapterList = chapterSetProp(chapterList)
      // 当前节对象
      this.currentCurriculum = getCurrentCurriculum(this.chapterList)
      this.getDetail()
    },
    /**
     * 点击课程列表切换左侧内容
     * @param currentCurriculum {object} 节对象
     */
    async handleCourseChange(currentCurriculum) {
      this.currentCurriculum = currentCurriculum
      this.getDetail()
    },
    // 获取详情
    async getDetail() {
      // this.curriculumDetail = courseDetailMock
      this.curriculumDetail = await this.getCurriculumDetail()
      // 如果视频播放总时长达到，则可进行随堂练习
      if (this.study_length >= this.canExerciseLength) {
        this.handleSetCanExercise()
      }
      this.$refs.videoPlay.changeDetail({
        resize: this.curriculumDetail.resize,
        speedProgress: this.curriculumDetail.speed_progress,
        studyLength: this.curriculumDetail.study_length
      })
    },
    handleSetCanExercise() {
      this.canExercise = true
    },
    /**
     * 课程列表的展开、关闭
     * @param index
     */
    handleCollapse(index) {
      let cur = this.chapterList[index] || {}
      if (cur.hasOwnProperty('isOpen')) {
        cur.isOpen = !cur.isOpen
      }
    },
    /**
     * 跳转到课程练习
     */
    goPageExercises() {
      this.$router.push({
        path: 'exercises'
      })
    },
    // 获取学科详情
    getCurriculumDetail() {
      return this.$http.post('/subject/student_curriculum_detail', {
        major_id: this.$store.state.studentInfo.major_detail.major_id,
        subject_id: this.subject_id,
        curriculum_id: this.curriculum_id,
      }).then(res => {
        return res || {}
      })
    },
    // 获取学科章列表
    getChapterList() {
      return this.$http.post('/subject/student_curriculum_list', {
        major_id: this.$store.state.studentInfo.major_detail.major_id,
        subject_id: this.subject_id,
      }).then(res => {
        return res || []
      })
    },
  }
}
</script>

<style lang="less" scoped>
  .course_detail {
    font-size: 14px;
    /*课程大标题*/

    .course_title {
      color: #9DD521;
      line-height: 50px;
    }

    /*课程内容部分*/

    .course_content {
      width: 100%;
      border: 1px solid rgba(235, 235, 235, 1);
      box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.05);
      display: flex;
      align-content: space-between;
      padding: 20px 0 20px 20px;
      box-sizing: border-box;
      /*左侧视频*/

      .left_content {
        width: 770px;
        padding-right: 20px;
        box-sizing: border-box;
        border-right: 1px solid #EBEBEB;

        .video_panel {
          width: 100%;
          height: 372px;
          margin-bottom: 34px;
          background-color: #f1f1f1;
        }

        /*左侧视频下方简介*/

        .course_introduce {
          .current_title {
            color: #222222;
            font-size: 16px;
            font-weight: bold;
          }

          .exercise_data {
            display: flex;
            align-items: center;
            justify-content: space-between;

            span {
              height: 30px;
              line-height: 40px;
              color: #666666;
            }

            span.active_item {
              color: #9DD521;
            }

            button {
              width: 80px;
              height: 30px;
              border-radius: 4px;
              box-sizing: border-box;
              color: #9DD521;
              border: 1px solid rgba(157, 213, 33, 1);
            }
            button:disabled {

              color: #B4B4B4;
              border: 1px solid rgba(180, 180, 180, 1);
            }
          }

          .course_datail {
            /*tab头部*/

            .tab_header {
              position: relative;
              font-size: 16px;
              line-height: 50px;
              border-bottom: 1px solid #EBEBEB;

              span {
                width: 160px;
                text-align: center;
                cursor: pointer;
                display: inline-block;
              }

              span.active_tab {
                color: #9DD521;
              }

              .active_arrow {
                bottom: 0;
                left: 0;
                width: 160px;
                height: 2px;
                position: absolute;
                background-color: #9DD521;
                transition: all 0.2s ease;

                &.second_active {
                  transform: translate(100%, 0px);
                }

                &::after {
                  display: block;
                  content: '';
                  border-width: 4px;
                  border-style: solid;
                  left: calc(50% - 2px);
                  top: -8px;
                  position: absolute;
                  border-color: transparent transparent #9DD521 transparent;
                }
              }
            }

            /*tab内容*/

            .tab_content {
              color: #222222;
              line-height: 44px;
              font-weight: bold;
              min-height: 150px;

              .enclosure_file {
                display: flex;
                justify-content: space-between;

                .file_name {
                  width: 350px;
                }

                .download_btn {
                  cursor: pointer;

                  .download_icon {
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    background: url('/static/images/schedule_icon_download.png') center center no-repeat;
                  }
                }
              }

              .no_download {
                padding-top: 20px;
                color: #666;
                font-size: 14px;
                text-align: center;
              }
            }
          }
        }
      }

      /*右侧课程列表*/

      .right_content {
        width: 408px;
        padding: 0 36px 20px 36px;

        .list_title {
          position: relative;
          color: #9DD521;
          font-weight: bold;
          margin-top: -3px;
          padding-bottom: 6px;
          border-bottom: 1px solid #F5F6FA;

          &:after {
            content: '';
            display: block;
            position: absolute;
            width: 14px;
            height: 1px;
            bottom: 0;
            margin-left: 12px;
            background-color: #9DD521;
          }
        }

        /*课程下拉组件*/

        .course_panel {
          margin: 20px 0;

          .course_panel_tit {
            color: #222222;
            position: relative;
            cursor: pointer;

            &::after {
              display: block;
              content: '';
              border-width: 6px;
              border-style: solid;
              right: 0;
              top: 50%;
              margin-top: -1px;
              position: absolute;
              border-color: #9DD521 transparent transparent transparent;
            }
          }

          .course_panel_item {
            color: #666666;
            font-size: 13px;
            padding: 10px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .course_name {
              width: 70%;
              overflow: hidden;
              text-overflow: ellipsis;
              cursor: pointer;
            }

            .learn_data {
              min-width: 30%;
              display: flex;
              justify-content: space-between;
            }

            .grade_row {
              &.is_pass {
                color: #9DD521;
              }

              &.no_pass {
                color: #F47070;
              }
            }
          }
        }
      }
    }
  }
</style>
